/* purgecss start ignore */
/* base admonitions variables on  variables */
:root {
  --cb-admonition-background-color: inherit;
  --cb-admonition-border-width: 4px;
  --cb-admonition-border-color: inherit;
  --cb-admonition-border-radius: 0.2rem;
  --cb-admonition-color: #fff;
  --cb-admonition-padding-vertical: 1rem;
  --cb-admonition-padding-horizontal: 1rem;
  --cb-color-note: #0070f3;
  --cb-color-note-lighten: #0071f311;
  --cb-color-important: #19cc96;
  --cb-color-important-lighten: #19cc9611;
  --cb-color-tip: #d400ff;
  --cb-color-tip-lighten: #d400ff11;
  --cb-color-caution: #f5a623;
  --cb-color-caution-lighten: #f5a62311;
  --cb-color-warning: #e00;
  --cb-color-warning-lighten: #e0000011;
  --cb-color-text-dark: #000;
}

/* apply variables to admonitions */

.admonition {
  margin: var(--cb-admonition-padding-vertical) calc(0em - var(--space));
  padding: var(--cb-admonition-padding-vertical) var(--space);
  background-color: var(--cb-admonition-color-lighten);
  color: var(--cb-admonition-color);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.6s;

  h5 {
    margin-top: 0;
    margin-bottom: 4px;
    text-transform: uppercase;
    color: var(--cb-admonition-icon-color) !important;
  }

  .admonition-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    margin-top: 0.3em;
    svg {
      display: inline-block;
      width: 22px;
      height: 22px;
      stroke-width: 0;
      fill: var(--cb-admonition-color);
      stroke: var(--cb-admonition-color);
    }
  }

  .admonition-content {
    font-family: var(--base-font-family);
    color: var(--body-color) !important;

    > :last-child {
      margin-bottom: 0;
    }
  }
}

/* set variables based on admonition type */

.admonition {
  --cb-admonition-background-color: var(--cb-color-note);
}

.admonition-note {
  --cb-admonition-color: var(--cb-color-note);
  --cb-admonition-color-lighten: var(--cb-color-note-lighten);
}

.admonition-important {
  --cb-admonition-color: var(--cb-color-important);
  --cb-admonition-color-lighten: var(--cb-color-important-lighten);
}

.admonition-tip {
  --cb-admonition-color: var(--cb-color-tip);
  --cb-admonition-color-lighten: var(--cb-color-tip-lighten);
}

.admonition-caution {
  --cb-admonition-color: var(--cb-color-caution);
  --cb-admonition-color-lighten: var(--cb-color-caution-lighten);
}

.admonition-warning {
  --cb-admonition-color: var(--cb-color-warning);
  --cb-admonition-color-lighten: var(--cb-color-warning-lighten);
}

/* purgecss end ignore */
